import React, { Component } from 'react'
import {Route,Switch} from 'react-router-dom'
import Message from '../Message'
import News from '../News'
import MyNavLink from '../../components/MyNavLink'

export default class Home extends Component {
	render() {
		return (
			<div>
				<h2>Home组件内容</h2>
				<div>
					{/* 导航区 */}
					<ul className="nav nav-tabs">
						{/* react中我们通过Link标签实现：路径的改变，进而引起不同组件的切换 */}
						<li>
							<MyNavLink to="/home/news">News</MyNavLink>
						</li>
						<li>
							<MyNavLink to="/home/message">Message</MyNavLink>
						</li>
					</ul>
					{/* 展示区 */}
					<Switch>
						<Route path="/home/news" component={News}/>
						<Route path="/home/message" component={Message}/>
					</Switch>
				</div>
			</div>
		)
	}
}
